var count = 0;
var countTimer = null;

function drawProgress(x, y, r, num){
   count = 0;
   countTimer = null;
  drawProgressbg(x, y, r);
  countInterval(x, y, r, num);
}

function drawProgressbg(x, y, r) {
  // 使用 wx.createContext 获取绘图上下文 context
  var ctx = wx.createCanvasContext('canvasProgressbg')
  ctx.setLineWidth(20);// 设置圆环的宽度
  ctx.setStrokeStyle('#D8D8D8'); // 设置圆环的颜色
  ctx.setLineCap('round') // 设置圆环端点的形状
  ctx.beginPath();//开始一个新的路径
  ctx.arc(x, y, r, 0, 2 * Math.PI, false);
  //x=75(x坐标) y=75(y坐标) r=65(半径)  0（起始角） 2 * Math.PI（结束角） False = 顺时针，true = 逆时针。
  ctx.stroke();//对当前路径进行描边
  ctx.draw();
}

function drawCircle(step) {
  var context = wx.createCanvasContext('canvasProgress');
  context.setLineWidth(20);
  context.setStrokeStyle("#01C474");
  context.setLineCap('round')
  context.beginPath();
  // x=75(x坐标) y=75(y坐标) r=65(半径)  0（起始角） 2 * Math.PI（结束角） False = 顺时针，true = 逆时针。
  context.arc(75, 75, 65, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
  context.stroke();
  context.draw()
}


function countInterval(x, y, r, num) {
  countTimer = setInterval(() => {
    if (count <= num) {
      /* 绘制彩色圆环进度条  
      注意此处 传参 step 取值范围是0到2，
      所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
      */
      drawCircle(count / 30)
      count++;
    } else {
      clearInterval(countTimer);
    }
  }, 100)
};



module.exports = {
  drawProgress: drawProgress
}
